<script setup lang="js">
  import axios from 'axios'
  import { ref } from 'vue';
  import { ElMessage } from "element-plus";
  import request from '../../request/axios'
  import { PATH_URL } from '../../request/axios/service.js'

  const userInfo = ref({
    nickname: '',
    gender: '',
    image: new URL(`../../assets/image/icon/user.png`, import.meta.url).href
  })
  const userInfoPhoen = ref('')
  const getUserMessage = async () => {
    try {
      const res = await request.getV2({ url: '/v1/api-user-Info' });
      userInfo.value.image = res.data.head ? res.data.head : new URL(`../../assets/image/icon/user.png`, import.meta.url).href
      userInfo.value.gender = res.data.gender
      userInfo.value.nickname = res.data.nickname
      userInfoPhoen.value = res.data.phone
      localStorage.setItem("userInfo", JSON.stringify(res.data))
    } catch (error) {
      console.log(error);
    }
  }
  getUserMessage()
  const onSubmit = async () => {
    try {
      if (!userInfo.value.nickname) return ElMessage.error('请输入昵称');
      const res = await request.postV2({ url: '/v1/api-user-update', data: userInfo.value })
      if (res.code != 200) return ElMessage.error(res.msg);
      localStorage.setItem("userInfo", JSON.stringify(res.data))
      ElMessage.success(res.msg);
      getUserMessage()
    } catch (error) {
      console.log(error);
    }
  }

  // 文件上传
  const handleUpload = async (file) => {
    const url = PATH_URL + '/v1/api-upload-oss'
    const formData = new FormData()
    formData.append('file[]', file.file, file.name)
    axios
      .post(url, formData, {
        headers: {
          'Authorization': localStorage.getItem("token") || '',
          'Content-Type': 'multipart/form-data'
        }
      })
      .then((response) => {
        if (response.data.code == 200) {
          userInfo.value.image = response.data.data[0].oss_upload_files_path
        }
      })
      .catch((error) => {
        console.log('Upload error:', error)
      })
  }

</script>

<template>
  <div class="container">
    <div class="content-userinfo">
      <img :src="userInfo.image" class="user-image" alt="用户头像" />
      <el-upload action="#" :show-file-list="false" :http-request="handleUpload" accept=".png,.jpg,.jpeg">
        <div class="user-image-set">
          <Camera style="width: 20px;color: #999999;" />更换头像
        </div>
      </el-upload>
      <el-form :model="userInfo" label-width="auto" class="user-form">
        <el-form-item label="昵称：">
          <el-input v-model="userInfo.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="userInfo.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="userInfoPhoen" disabled placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item class="form-buttons">
          <el-button class="form-submit" @click="getUserMessage">重置修改</el-button>
          <el-button class="form-submit" type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.3s ease;
  }

  .content-userinfo {
    width: 60vw;
    max-width: 1000px;
    min-width: 300px;
    margin: 0 auto;
    text-align: center;
    transform: scale(1);
    transition: transform 0.3s ease;

    .user-image {
      width: 10vw;
      height: 10vw;
      min-width: 80px;
      min-height: 80px;
      max-width: 150px;
      max-height: 150px;
      border-radius: 50%;
    }

    .user-image-set {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 9vw;
      min-width: 80px;
      max-width: 120px;
      padding: 4px 10px;
      color: #999999;
      border-radius: 20px;
      background: #fff;
      cursor: pointer;
      margin: 2vh auto 4vh;
    }

    .user-form {
      max-width: 60vw;
      min-width: 280px;
      margin: 2vh auto;
    }

    .form-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2vh;
    }

    .form-submit {
      width: 49%;
      min-width: 120px;
      margin-top: 2vh;
    }
  }

  @media screen and (max-width: 768px) {
    .container {
      transform: scale(0.85);
    }
  }

  @media screen and (max-width: 480px) {
    .container {
      transform: scale(0.7);
    }
  }
</style>